import AutoComplete from 'antd/es/auto-complete';
import Divider from 'antd/es/divider';
import { AppStore } from '../../../../store';
import { useEffect, useMemo, useState } from 'react';
import { flattenModels } from '../../../../util';
import { ISelectEventParam } from '@manycore/custom-ksg-viewer-sdk';


export function VisibilityDemo(props: {
    createButton: (infos: Array<{
        /** buttonName */
        name: string,
        onClick: () => void;
    }>) => JSX.Element[]
}) {
    const { createButton } = props;
    const { appState: { app, jsonData } } = AppStore.useContainer();
    const [inputModelId, setInputModelId] = useState<string>();
    const [prodCatId, setProdCatId] = useState<string>();
    const [brandGoodId, setBrandGoodId] = useState<string>();

    const models = useMemo(() => {
        return flattenModels(jsonData?.paramModel || []);
    }, [jsonData]);

    useEffect(() => {
        if (!app) {
            return;
        }
        const onListener = (param: ISelectEventParam) => {
            // 默认将选中的写入到input
            setInputModelId(param[0]?.id);
        }
        app.selectionService.on(onListener);
        return () => app.selectionService.off(onListener);
    }, [app])

    const CVisibleIDApis = [{
        name: '隐藏指定id模型',
        onClick: () => inputModelId && app!.visibilityService.setVisibility(data => data.id === inputModelId, false)
    }, {
        name: '显示指定id模型',
        onClick: () => inputModelId && app!.visibilityService.setVisibility(data => data.id === inputModelId, true)
    }]

    const CVisibleCatApis = [{
        name: '隐藏指定真分类模型',
        onClick: () => app!.visibilityService.setVisibility(data => !!data.prodCatId && data.prodCatId === Number(prodCatId), false)
    }, {
        name: '显示指定真分类模型',
        onClick: () => app!.visibilityService.setVisibility(data => !!data.prodCatId && data.prodCatId === Number(prodCatId), true)
    }]

    const CVisibleProductApis = [{
        name: '隐藏指定商品模型',
        // 加了brandGoodId不为空的判定 避免传入undefined导致元件全部被隐藏
        onClick: () => app!.visibilityService.setVisibility(data => !!data.brandGoodId && data.brandGoodId === brandGoodId, false)
    }, {
        name: '显示指定商品模型',
        onClick: () => app!.visibilityService.setVisibility(data => !!data.brandGoodId && data.brandGoodId === brandGoodId, true)
    }]

    return <>
        <Divider>模型隐藏</Divider>
        <AutoComplete value={inputModelId} onChange={(data) => setInputModelId(data)} style={{ width: '100%' }} placeholder='输入或者选择模型id' options={models.map(m => ({ value: m.id }))} />
        {createButton(CVisibleIDApis)}
        <AutoComplete value={prodCatId} onChange={(data) => setProdCatId(data)} style={{ width: '100%' }} placeholder='输入指定真分类' options={[...new Set(models.map(m => m.prodCatId))].filter(m => !!m).map(v => ({ value: v }))} />
        {createButton(CVisibleCatApis)}
        <AutoComplete value={brandGoodId} onChange={(data) => setBrandGoodId(data)} style={{ width: '100%' }} placeholder='输入指定商品id' options={[...new Set(models.map(m => m.obsBrandGoodId))].filter(m => !!m).map(v => ({ value: v }))} />
        {createButton(CVisibleProductApis)}
    </>
}